@media screen and (min-width:750px) {
    html {
        font-size: 75px !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #333;
}

i {
    font-style: normal;
}

li {
    list-style: none;
}

body {
    max-width: 750px;
    min-width: 320px;
    margin: 0 auto;
}

// user部分
.user {
    display: flex;
    height: 2.6rem;
    background: url(../images/头部背景.png) no-repeat center;

    img {
        margin: .533333rem .306667rem 0 .453333rem;
        width: 1.466667rem;
        height: 1.466667rem;
    }

    .userName {
        h2 {
            margin-top: .76rem;
            font-weight: normal;
            color: #fff;
            font-size: .426667rem;
        }

        p {
            margin-top: .133333rem;
            font-size: .346667rem;
            color: #8a817b;
        }
    }

    .login {
        margin: .96rem 0 0 1.866667rem;
        width: 2.186667rem;
        height: .72rem;
        color: #cbad4f;
        font-size: .346667rem;
        text-align: center;
        line-height: .72rem;
        border: 1px solid #cbad4f;
        border-radius: .72rem;
    }
}

// header部分
.header {
    padding: .426667rem 0 .426667rem .426667rem;
    height: 11.2rem;

    .header_nav {
        padding-right: .426667rem;

        img {
            width: 100%;
            border-radius: .106667rem;
        }
    }

    .header_top {
        margin-top: .133333rem;
        height: .933333rem;
        display: flex;
        text-align: center;

        h2 {
            flex: 1;
            height: 100%;
            line-height: .933333rem;
            font-size: .426667rem;

            &:nth-child(1) {
                color: #ecc252;
                border-bottom: 2px solid #ecc252;
            }
        }
    }

    .header_mid {
        margin-top: .533333rem;
        display: flex;
        justify-content: space-between;

        h3 {
            font-size: .266667rem;
        }

        a {
            font-size: .32rem;
            color: #a0a0a0;
        }
    }

    .ad {
        overflow: hidden;

        .swiper-container1 {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            width: 2.666667rem;
            height: 3.146667rem;
            border: 1px solid #aaa;
            border-radius: .133333rem;
            margin-top: .56rem;
            // padding: 0 .066667rem;
            text-align: center;
            font-size: 18px;
            background: #fff;
            flex-direction: column;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;

            &::before {
                content: '首开特惠';
                position: absolute;
                top: -0.106667rem;
                right: -1px;
                width: 1.466667rem;
                height: .453333rem;
                line-height: .453333rem;
                color: #fff;
                border-radius: 0 .133333rem;
                background-image: linear-gradient(to right, #cb17e8, #6718e1);
                font-size: .24rem;
            }

            h2 {
                font-size: .32rem;
                font-weight: normal;
            }

            p {
                font-size: .586667rem;
                color: #eccc67;
                margin: .266667rem 0;

                i {
                    font-size: .293333rem;
                }
            }

            span {
                font-size: .293333rem;
                color: #aaa;
            }
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            background-color: #fcf2d9;
            border: 1px solid #f3cd6c;
        }
    }

    .discounts {
        display: flex;
        line-height: 1.066667rem;
        color: #aaa;

        img {
            width: 1.066667rem;
            height: 1.066667rem;
        }

        span {
            font-size: .293333rem;
        }

        p {
            margin-left: 3.786667rem;
            font-size: .266667rem;
        }
    }

    .open {
        display: block;
        margin: 0 .4rem;
        font-size: .373333rem;
        height: 1.066667rem;
        line-height: 1.066667rem;
        text-align: center;
        border-radius: .466667rem;
        background-color: #f4cd64;
        color: #333;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    }

    b {
        display: block;
        margin-top: .266667rem;
        font-size: .346667rem;
        font-weight: normal;
        color: #aaa;
        text-align: center;
    }

}

// combo部分
.combo {
    padding-left: .426667rem;

    .combo_head {
        margin-top: .533333rem;
        display: flex;
        justify-content: space-between;

        h3 {
            font-size: .32rem;
        }

        a {
            margin-right: .426667rem;
            font-size: .32rem;
            color: #a0a0a0;
        }
    }

    .combo_foot {
        overflow: hidden;

        .swiper-container2 {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            width: 2.666667rem;
            height: 4.053333rem;
            border: 1px solid #eee;
            box-shadow: 0 0 5px rgba(0, 0, 0, .1);
            border-radius: .16rem;
            margin-top: .56rem;
            background: #fff;
            flex-direction: column;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: flex-start;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;

            img {
                width: 100%;
            }

            h2 {
                margin-top: .2rem;
                font-size: .346667rem;
                font-weight: normal;
            }

            span {
                margin-top: .4rem;
                width: 2.24rem;
                height: .746667rem;
                line-height: .746667rem;
                text-align: center;
                border-radius: .506667rem;
                font-size: .333333rem;
                color: #333;
                background-color: #f2cc61;
            }
        }
    }
}

// nav部分
.nav {
    margin-top: .633333rem;
    padding: .426667rem;

    .nav_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    h2 {
        font-size: .373333rem;
        margin-bottom: .4rem;
    }

    a {
        flex: 49%;
        flex-grow: 0;
        margin-top: .4rem;
        padding-left: .333333rem;
        display: flex;
        align-items: center;
        height: 1.626667rem;
        border: 1px solid #eee;
        border-radius: .133333rem;

        img {
            width: .853333rem;
            height: .853333rem;
            margin-right: .133333rem;
        }

        p {
            font-size: .346667rem;
            color: #333;

            i {
                line-height: .666667rem;
                font-size: .32rem;
                color: #ccc;
            }
        }
    }
}

// VIP福利部分
.welfare {
    margin-top: .633333rem;
    padding: .426667rem;

    .welfare_top {
        display: flex;
        justify-content: space-between;

        h2 {
            font-size: .4rem;
        }

        a {
            font-size: .32rem;
            color: #aaa;
        }
    }

    .welfare_content {
        margin-top: .4rem;
        display: flex;
        justify-content: space-between;

        a {
            flex: 0 1 48%;
            box-shadow: 0 0 5px rgba(0, 0, 0, .1);

            img {
                width: 100%;
                border-radius: .106667rem;
            }

            p {
                font-size: .32rem;
                color: #333;
                margin-left: .2rem;
                margin-top: .133333rem;
            }

            .hot {
                display: flex;
                padding: .2rem;
                justify-content: space-between;
                align-items: center;

                span {
                    color: #aaa;
                    font-size: .266667rem;
                }

                i {
                    width: 1.546667rem;
                    height: .613333rem;
                    background-image: linear-gradient(to right, #f3d7a9, #cfa25e);
                    font-size: .32rem;
                    text-align: center;
                    line-height: .613333rem;
                    border-radius: .613333rem;
                    color: #fff;
                }
            }
        }
    }
}

// VIP特权部分
.privilege {
    overflow: hidden;
    margin-top: .426667rem;
    padding-left: .426667rem;

    h2 {
        font-size: .4rem;
        margin-bottom: .4rem;
    }

    .swiper-container3 {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        font-size: 18px;
        background: #fff;
        width: 40%;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        margin-right: .266667rem;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

        .privilege_top {
            height: 1.666667rem;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffedbf;
            border-bottom: 1px solid #eee;

            img {
                width: 1.2rem;
                height: 1.2rem;
            }

            span {
                font-size: .4rem;
                color: #c29235;
            }
        }

        .privilege_foot {
            padding: .2rem;

            h4 {
                margin-bottom: .266667rem;
                text-align: center;
                font-size: .293333rem;
            }

            p {
                line-height: 1.3;
                color: #aaa;
                font-size: .293333rem;
            }
        }
    }

    .swiper-slide:not(:first-child) {
        width: 35%;
        border: 0;
        margin: 0;

        .privilege_top,
        .privilege_foot {
            width: 100%;
            height: 1.906667rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border-right: 1px solid #eee;

            p {
                display: flex;
                justify-content: center;

                img {
                    width: .866667rem;
                    height: .866667rem;
                }

                span {
                    font-size: .266667rem;
                    line-height: .866667rem;
                    color: #f0cf71;
                }
            }

            i {
                font-size: .293333rem;
                color: #aaa;
            }
        }

        .privilege_foot {
            padding: 0;
        }
    }
}

// 积分商城部分
.integral {
    padding-left: .426667rem;

    .integral_head {
        margin-top: .533333rem;
        display: flex;
        justify-content: space-between;

        h3 {
            font-size: .4rem;
        }

        a {
            margin-right: .426667rem;
            font-size: .293333rem;
            color: #aaa;
        }
    }

    .integral_content {
        margin-top: .533333rem;
        position: relative;
        height: 4.186667rem;
        margin-right: .426667rem;
        background: url(../images/积分商城.png) no-repeat;

        a {
            position: absolute;
            bottom: 0;
            height: 2.826667rem;
            width: 90%;
            margin: 0 .48rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: .426667rem;
            font-size: .32rem;
            color: #a0a0a0;
            // background-image: linear-gradient(to top right,#cfcfcf 0%,#cfcfcf 5%,#fff 5%,#fff 5%,#cfcfcf 6%,#cfcfcf 11%,#fff 11%,#fff 12%,#cfcfcf 12%,#cfcfcf 17%,#fff 17%,#fff 18%,#cfcfcf 18%,#cfcfcf 23%,#fff 23%,#fff 24%,#cfcfcf 24%,#cfcfcf 29%,#fff 29%,#fff 30%,#cfcfcf 30%,#cfcfcf 35%,#fff 35% ,#fff 36%,#cfcfcf 36%,#cfcfcf 41%,#fff 41%,#fff 42%,#cfcfcf 42%,#cfcfcf 47%)
            background-image: linear-gradient(to right, #f0f0f0 0%, #fff 50%, #fff 50%, #cbcdcc 100%);

            span {
                margin-top: .333333rem;
                color: #333;
            }
        }
    }

    .integral_foot {
        margin-top: .4rem;
        overflow: hidden;

        .swiper-container4 {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            font-size: 18px;
            background: #fff;
            margin-left: .04rem;
            margin-bottom: .4rem;
            border-radius: .106667rem;
            box-shadow: 0 0 5px rgba(0, 0, 0, .1);
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;

            a {
                width: 100%;
                height: 2.933333rem;
                background: #f3f3f3 url(../images/良品铺子.png) no-repeat center / 114px;
            }

            &:nth-child(2) {
                a {
                    background: #f3f3f3 url(../images/两元券.png) no-repeat center / 114px;
                }
            }

            p {
                width: 90%;
                margin: .133333rem auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: .293333rem;
            }

            span {
                margin: 0 .133333rem .8rem;
                font-size: .293333rem;
            }
        }
    }
}

// VIP活动部分
.activity {
    padding: .426667rem;

    .activity_head {
        margin-top: .533333rem;
        display: flex;
        justify-content: space-between;

        h3 {
            font-size: .4rem;
        }

        a {
            font-size: .293333rem;
            color: #aaa;
        }
    }

    .activity_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        a {
            margin-top: .8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 1 48%;

            img {
                width: 100%;
                height: 100%;
            }

            span {
                margin-top: .266667rem;
                font-size: .32rem;
            }
        }
    }
}

// vip会员新片部分
.new {
    padding: .426667rem;

    .new_head {
        margin-top: .533333rem;
        display: flex;
        justify-content: space-between;

        h3 {
            font-size: .4rem;
        }

        a {
            font-size: .293333rem;
            color: #aaa;
        }
    }

    .new_content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        a {
            height: 4.04rem;
            margin-top: .4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 1 32%;

            img {
                width: 100%;
                height: 100%;
            }

            span {
                margin-top: .266667rem;
                font-size: .32rem;
            }
        }
    }
}

// VIP帮助服务中心部分
.serve {
    padding: .426667rem;

    .serve_head {
        margin-top: .533333rem;
        display: flex;
        justify-content: space-between;

        h3 {
            font-size: .4rem;
        }

        a {
            font-size: .293333rem;
            color: #aaa;
        }
    }

    .serve_content {
        display: flex;
        margin-top: .666667rem;

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
            img {
                width: .986667rem;
                height: .986667rem;
            }
            span {
                margin-top: .133333rem;
                font-size: .32rem;
            }
        }
    }
    .serve_foot {
        margin-top: .4rem;
        li {
            border-top: 1px solid #eee;
            padding: .4rem 0;
            font-size: .4rem;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            
            &:nth-child(1) {
                padding-left: .746667rem;
                background: url(../images/喇叭.png) no-repeat left / .626667rem;
                color: #eeca54;
            }
        }
    }
}